$(function() {
	//页面加载完成之后执行
	pageInit();
});

function pageInit() {
	//创建jqGrid组件
	var lastId;
	jQuery("#list2").jqGrid({
		url: '../data/JSONData.json', //组件创建完成之后请求数据的url
		datatype: "json", //请求数据返回的类型。可选json,xml,txt
		colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes','zz','xx'], //jqGrid的列显示名字
		colModel: [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
			{
				name: 'id',
				index: 'id',
				width: 55,
				editable: true
			}, {
				name: 'invdate',
				index: 'invdate',
				width: 90,
				editable: true
			}, {
				name: 'name',
				index: 'name asc, invdate',
				width: 100,
				editable: true
			}, {
				name: 'amount',
				index: 'amount',
				width: 80,
				align: "right",
				editable: true
			}, {
				name: 'tax',
				index: 'tax',
				width: 80,
				align: "right",
				editable: true
			}, {
				name: 'total',
				index: 'total',
				width: 80,
				align: "right",
				editable: true
			}, {
				name: 'note',
				index: 'note',
				width: 100,
				sortable: false,
				editable: true
			}, {
				name: 'zz',
				index: 'zz',
				width: 100,
				sortable: false,
				editable: true
			}, {
				name: 'xx',
				index: 'xx',
				width: 20,
				sortable: false,
				editable: true
			}
		],
		/*onSelectRow: function(id) {

			if (id) {
				lastId = id
			}
		},

		beforeSelectRow: function(id, e) {
			if (lastId == id) {
				return false;
			} else {
				return true;
			}
		},*/

		onPaging: function(pgbutton) { 
			//当点击翻页按钮但还为展现数据时触发此事件, 当然这跳转栏输入页
			//码改变页时也同样触发此事件
			alert(pgbutton); //first_booklistpage,  prev_booklistpage,  next_booklistpage,  
			//last_booklistpage
		},
		width:'80%',
		autowidth:true,
		height:'100%',
		rowNum: 10, //一页显示多少条
		rowList: [5, 8, 10], //可供用户选择一页显示多少条
		pager: '#pager2', //表格页脚的占位符(一般是div)的id
		sortname: 'id', //初始化的时候排序的字段
		sortorder: "desc", //排序方式,可选desc,asc
		//mtype: "", //向后台请求数据的ajax的类型。可选post,get
		viewrecords: true,
		caption: "JSON Example", //表格的标题名字
		editurl: "RowEditing"
	});
	/*创建jqGrid的操作按钮容器*/
	/*可以控制界面上增删改查的按钮是否显示*/

	//$("#list2").jqGrid("delRowData", selectedId);

	jQuery("#list2").jqGrid('navGrid', '#pager2', {
		edit: true,
		add: true,
		del: true,
		search: true,
		refresh: false
	});
}